<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var o = {
            name: 'str',
            age: 18,
            favorite: [
                {name: 'xuexi'},
                {name: 'play'},
                {name: 'drive'}
            ]
        }

        function defineReactive(target, key , value, enumerable) {
            
            if (typeof value === 'object' && typeof value !== null && !Array.isArray(value)) {
                reactify(value);
            } else {
                Object.defineProperty(target, key, {
                    get () {
                        console.log(`获取对象的属性 ${key} 的属性值为: ${value}`);
                        return value
                    },
                    set (newVal) {
                        console.log(`设置对象的属性 ${key} 的属性值为: ${newVal}`);
                        value = newVal;
                    },
                    enumerable,
                    configurable: true
                })
            }
        }

        function reactify(o) {
            const keys = Object.keys(o);

            for (let i = 0; i < keys.length; i++) {
                const value = o[keys[i]];
                defineReactive(o, keys[i], value, true);
            }
        }

        reactify(o)
    </script>
</body>
</html>